<template>
	<view class="wrap">
		<u-navbar :custom-back="$back" :back-icon-color="navbar.titleColor" is-back :title="navbar.title"
			:background="navbar.background" :title-color="navbar.titleColor">
		</u-navbar>
		<view class="content">
			<!-- <uni-section title="表单校验1" type="line"> -->
				<view class="example">
					<!-- 基础表单校验 -->
					<u-form ref="valiForm" label-position="top" :model="valiFormData">
						<u-form-item label="岗位" prop="workPostName" >
								<u-input v-model="valiFormData.workPostName" :disabled='true'/>
						</u-form-item>
						<u-form-item label="工位" prop="workstationName">
								<u-input v-model="valiFormData.workstationName" :disabled='true'/>
						</u-form-item>
						<u-form-item label="操作类型" required prop="workType">
							<u-radio-group v-model="valiFormData.workType">
								<u-radio
									v-for="(item, index) in workTypeList" :key="index" 
									:name="item.value"
								>
									{{item.text}}
								</u-radio>
							</u-radio-group>
						</u-form-item>
						<u-form-item label="备注" required prop="remark">
							<u-radio-group v-model="valiFormData.remark">
								<u-radio
									v-for="(item, index) in remarkList" :key="index" 
									:name="item.value"
								>
									{{item.text}}
								</u-radio>
							</u-radio-group>
						</u-form-item>
					</u-form>
					<button type="primary" @click="submit()">确认</button>
				</view>
			<!-- </uni-section> -->
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show:false,
				//头部标题配置
				navbar: {
					title: "选择岗位",
					background: {
						backgroundColor: '#2373FA',
					},
					titleColor: "#ffffff",
				},
				// 校验表单数据
				valiFormData: {
					workPostName: '',
					workstationName: '',
					workType: '',
					remark:'熟工'
				},
				workPostId:'',
				workstationId:'',
				// 校验规则
				rules: {
					workPostName: [{
						required: true,
						message: '二维码中岗位信息为空'
					}],
					workstationName:[{
						required: true,
						message: '二维码中工位信息为空'
					}],
					workType:[{
						required: true,
						message: '操作类型不能为空',
					}],
					remark:[{
						required: true,
						message: '备注不能为空',
					}],
				},
				
				// 上下班数据
				workTypeList: [{
					text: '上班',
					value: 1
				}, {
					text: '下班',
					value: 2
				}],
				remarkList: [{
					text: '熟工',
					value: '熟工'
				}, {
					text: '学习',
					value: '学习'
				}],
			}
		},
		onLoad(option) {
			if (option.text) {
				const opt = JSON.parse(option.text)
				
				this.workPostId=opt.postId
				this.workstationId= opt.workstationId
				const workPostPar={
					openid:uni.getStorageSync('openid'),
					param:`{"workPostId":${this.workPostId}}`,
				}
				const workstationPar={
					openid:uni.getStorageSync('openid'),
					param:`{"workstationId":${this.workstationId}}`,
				}
				this.$u.api.getWorkPostById(workPostPar).then(res => {
					this.valiFormData.workPostName = res.data.name
				})
				this.$u.api.getWorkstationById(workstationPar).then(res => {
					this.valiFormData.workstationName =res.data.workstationName
				})
			}
		},
		onReady() {
				this.$refs.valiForm.setRules(this.rules);
		},
		onShow() {
			
		},
		methods: {
			
			submit(ref) {
				this.$refs.valiForm.validate(validate=>{
					if(validate){
						const form = {
							workPostId:this.workPostId,
							workstationId:this.workstationId,
							workType:this.valiFormData.workType,
							remark:this.valiFormData.remark,
						}
						const par ={
							openid:uni.getStorageSync('openid'),
							param:JSON.stringify(form),
						}
						this.$u.api.signWork(par).then(res => {
							if(res.code==200){
								this.$u.toast('签到成功')
							}else{
								this.$u.toast(res.msg)
							}
						})
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #f2f4f8;
	}

	.wrap {
		padding-bottom: 100upx;
		overflow: hidden;

		/deep/.uni-section-header {
			display: none;
		}

		.content {
			.example {
				padding: 15px;
				background-color: #fff;
			}

			.segmented-control {
				margin-bottom: 15px;
			}

			.button-group {
				margin-top: 15px;
				display: flex;
				justify-content: space-around;
			}

			.form-item {
				display: flex;
				align-items: center;
			}

			.button {
				display: flex;
				align-items: center;
				height: 35px;
				margin-left: 10px;
			}
		}
	}
</style>